<template>
  <div class="btn-list">
    <div v-if="submitBtnList && submitBtnList.length" :class="{'mobile-btn-container': showMobilePage}" class="flex-center">
      <div v-for="(item, index) in submitBtnList" :key="index" class="item">
        <el-popover
          v-if="item.roleType !== -1"
          v-model="item.popoverShow"
          placement="top"
          trigger="click"
          @show="show(item)">
          <div class="submit-btn-content">
            <Title title="下个节点处理人" />
            <div class="user-list">
              <template v-if="item._aduitors">
                <div v-if="item._aduitors && item._aduitors.length > 2" class="user-item">
                  <check-more-btn class="check-more" @click="addAudit(item, index)" />
                  <div class="dot">{{ item.userRelation?'+':'/' }}</div>
                </div>
                <template v-for="(user, j) in item._aduitors">
                  <div v-if="j<=1" :key="j" class="user-item">
                    <el-avatar :size="40" :src="user.avatar" ><img :src="adminIcon" alt=""></el-avatar>
                    <div class="user-name">{{ user.userName }}</div>
                    <img :src="closeBtn" class="delete-icon" alt="" @click="deleteUser(item, j)">
                    <div class="dot">{{ item.userRelation?'+':'/' }}</div>
                  </div>
                </template>
              </template>
              <AddBtn :size="40" @add="addAudit(item, index)"/>
            </div>
            <div class="btn-submit-list">
              <el-button type="primary" size="small" @click="submit(item)">确定</el-button>
              <el-button class="cancel-btn-style" type="info" size="small" @click="cancel(item)">取消</el-button>
            </div>
          </div>
          <el-button slot="reference" :disabled="disabled" :title="item.btnText" :loading="loading" class="flex-btn" type="primary" size="small">
            <div class="ellipsisOne" style="max-width: 110px;">{{ item.btnText }}</div>
          </el-button>
        </el-popover>
        <el-button v-else :disabled="disabled" :title="item.btnText" :loading="loading" class="flex-btn" type="primary" size="small" @click="handleSubmit(true)">
          <div class="ellipsisOne" style="max-width: 110px;">{{ item.btnText }}</div>
        </el-button>
      </div>
      <template v-if="!showMobilePage">
        <template v-if="!isRichText && submitBtnList.length > 2">
          <div v-for="i in submitBtnList.length % 2" :key="`empty-${i}`" class="item"/>
        </template>
        <template v-else-if="isRichText && submitBtnList.length > 3">
          <div v-for="i in 6 - submitBtnList.length" :key="`empty-${i}`" class="item"/>
        </template>
      </template>
    </div>
    <div v-else style="margin: 0 auto;">
      <el-button :disabled="disabled" :loading="loading" class="flex-btn" type="primary" size="small" @click="handleSubmit()">
        通过
      </el-button>
    </div>

    <DiversAuditorDialog ref="auditorDialog" :extend-params="{nodeId: currentNodeId}" is-submit-btn @closeDialog="setPopoverShow" @userSelect="userSelect" />
  </div>
</template>

<script>
import { mapState } from 'vuex';
import adminIcon from '@/assets/user-avatar.png';
import closeBtn from '@/assets/close_btn.png';
import Title from '@/components/Title';
import AddBtn from '@/components/Common/auditProcess/module/addBtn';
import ElMessage from '@/utils/message';
import CheckMoreBtn from '@/components/Common/auditProcess/module/checkMoreBtn';
import DiversAuditorDialog from '@/components/Common/auditProcess/module/diversAuditorDialog';
import { ROLE_TYPE } from '@/utils/const/process';
import { showModal } from '@/utils/message';
export default {
  components: { Title, AddBtn, DiversAuditorDialog, CheckMoreBtn },
  props: {
    submitBtnList: {
      type: Array,
      default: () => ([])
    },
    isRichText: {
      type: Boolean,
      default: false
    },
    currentNodeId: {
      type: String | Number,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    defaultAduitorList: { // 申请人
      type: Array,
      default: () => ([])
    },
    defaultAuthUserList: { // 授权人
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      adminIcon, closeBtn,
      examineRoles: []
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    handleSubmit(needCheck = false) {
      if (needCheck) {
        showModal('请确认是否提交？', '', {}).then(_ => {
          this.$emit('handleSubmit');
        }).catch(_ => null);
      } else {
        this.$emit('handleSubmit');
      }
    },
    addAudit(item, index) {
      let departmentList = [];
      if (item.departmentIdList && item.departmentIdList.length) {
        departmentList = item.departmentIdList.map(i => {
          return {
            id: i
          };
        });
      }
      const params = {
        aduitors: item._aduitors || [],
        item,
        examineRoleId: item.id || -1,
        roleType: item.roleType,
        departmentList: departmentList,
        allowSelectOther: item.allowSelectOther,
        defaultAduitorList: item.roleType === ROLE_TYPE.PROPOSER ? this.defaultAduitorList : this.defaultAuthUserList,
        designateUsers: item.diyUserList || [],
        cache: index
      };
      this.$refs.auditorDialog.dialogVisible = true;
      this.$refs.auditorDialog.initData(params, '添加人员');
    },
    userSelect(params) {
      this.$set(params.tempData.item, '_aduitors', params.selectUser);
      this.$set(params.tempData.item, 'popoverShow', true);
    },
    setPopoverShow(cache) {
      if (cache || cache === 0) {
        this.$set(this.submitBtnList[cache], 'popoverShow', true);
      }
    },
    deleteUser(item, index) {
      item._aduitors.splice(index, 1);
      this.$forceUpdate();
    },
    cancel(item) {
      this.$set(item, 'popoverShow', false);
    },
    show(item) {
      this.$emit('onShow', item);
    },
    submit(item) {
      if (!item._aduitors || item._aduitors.length === 0) {
        ElMessage.warning('请选择人员后提交');
        return;
      }
      this.$set(item, 'popoverShow', false);
      const _aduitors = item._aduitors && item._aduitors.length ? JSON.parse(JSON.stringify(item._aduitors)) : null;
      this.$emit('handleSubmit', _aduitors, item.id);
    }
  }
};
</script>

<style lang="scss" scoped>
.flex-center {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.btn-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  max-width: 460px;
  margin: 0 auto;
  .flex-btn {
    width: 120px;
    padding: 0;
    height: 32px;
    align-items: center;
    justify-content: center;
    display: flex;
  }
  .item {
    margin-right: 16px;
    width: 120px;
    margin-top: 16px;
  }
}
.submit-btn-content {
  min-width: 200px;
  .user-list {
    margin-top: 24px;
    display: flex;
    .user-item {
      display: flex;
      position: relative;
      flex-direction: column;
      align-items: center;
      margin-right: 20px;
      ::v-deep .el-avatar>img{
        width: 100%;
      }
    }
    .user-name {
      font-size: 12px;
      color: #999;
      margin-top: 4px;
    }
    .delete-icon {
      position: absolute;
      top: 0;
      right: -5px;
      width: 16px;
      cursor: pointer;
    }
  }
  .dot {
    margin: 0 10px;
    height: 40px;
    font-size: 16px;
    line-height: 40px;
    color: #666;
    position: absolute;
    right: -25px;
    top: 0px;
  }
}
.btn-submit-list {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}
.check-more {
  &::v-deep {
    .avator-box {
      display: flex;
    }
  }
}
.mobile-btn-container {
  .flex-btn {
    width: 80px;
    .ellipsisOne {
      max-width: 80px;
    }
  }
  .item {
    width: auto;
  }
}
</style>
